<template>
  <div>
    <div class="topBar">
      <div class="topBar-l">
        <img src="img/logo.png" />
        <div class="topBar-i">
          <img src="img/sousuo.png" />
          <span>搜一搜</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.topBar {
  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  background-color: rgb(132, 93, 50);
}
.topBar-l {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 0.56rem;
  padding-right: 0.12rem;
}
.topBar-l img {
  display: flex;
  width: 0.36rem;
  height: 0.28rem;
  margin-left: 0.12rem;
}
.topBar-i {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0%;
  margin-left: 11px;
  align-items: center;
  height: 0.32rem;
  background-color: rgb(240, 240, 240);
  border-radius: 0.16rem;
}
.topBar-i img {
  display: flex;
  width: 0.2rem;
  height: 0.2rem;
  margin-left: 0.1rem;
}
.topBar-i span {
  font-size: 0.14rem;
  height: 0.2rem;
  color: rgb(51, 51, 51);
  margin-left: 0.1rem;
  opacity: 0.4;
}
</style>